<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>任务列表列表</title>
</head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<body>
	<div id="index">
		<el-row :gutter="20">
			<el-col :span="6">
				<el-select v-model="type" placeholder="请选择">
		    		<el-option
				      v-for="item in typeOptions"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
		    		</el-option>
		  		</el-select>
	  		</el-col>
	  		<el-col :span="6">
				<el-select v-model="person" placeholder="请选择">
		    		<el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
		    		</el-option>
		  		</el-select>
	  		</el-col>
	  		<el-col :span="6">
	  			<el-button @click='query' type="success">查询</el-button>
	  		</el-col>
  		</el-row>
		
  		
  		<template>
		    <el-table :data="tableData" style="width: 100%">
		      <el-table-column prop="processId"  label="流程id" width="180">
		      </el-table-column>
		      <el-table-column prop="taskId"  label="任务id" width="180">
		      </el-table-column>
		      <el-table-column  prop="name" label="名称" width="180">
		      </el-table-column>
		      <el-table-column prop="applicant"  label="申请人" width="180">
		      </el-table-column>
		      <el-table-column  prop="assignee" label="办理人">
		      </el-table-column>
		      <el-table-column  prop="createTime" label="创建时间">
		      </el-table-column>
		      <el-table-column  prop="endTime" label="结束时间">
		      </el-table-column>
		      <el-table-column  prop="remarks" label="备注">
		      </el-table-column>
		      <el-table-column label="选择" >
		      	<template slot-scope="scope">
		      		<el-select v-model="nextPerson" placeholder="请选择" v-if="scope.row.assignee!='老板' ">
			    		<el-option
					      v-for="item in nextOpt"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
    					</el-option>
    			    </el-select>
    			 </template>
		      </el-table-column>
		      <el-table-column label="操作" >
			      <template slot-scope="scope">
			        <el-button  type="success" v-if="scope.row.assignee=='老板' && scope.row.statu=='0' " size="mini" @click="pass(scope.row)">审批通过</el-button>
			        <el-button  type="success" v-if="scope.row.assignee!='老板' && scope.row.statu=='0' " size="mini" @click="transPass(scope.row)">审批通过</el-button>
			      </template>
    		  </el-table-column>
		    </el-table>
 	 	</template>
 	 	
  		</el-select>
 	 	
	</div>
	<script type="text/javascript">
		new Vue({
			el : '#index',
			data : {
				options:[
				         {value: '测试员工A', label: '测试员工A'},
				         {value: '测试员工B', label: '测试员工B'},
				         {value: '老板', label: '老板'}
				        ],
				nextOpt:[
				         {value: '老板', label: '老板'}
				        ],
				person:'',
				tableData:[],
				flag:false,
				nextPerson:'',
				type:'',
				typeOptions:[
					         {value: 'unFinished', label: '未完成'},
					         {value: 'finished', label: '已完成'},
					         {value: 'approval', label: '待审批'}
					        ]
			},
			methods: {
				query(){
					var url='';
					var _type = this.type;
					if(_type=='unFinished'){
						url="./leaveApply/queryHisTask/"+this.person+"/"+_type;
					}else if(_type=='finished'){
						url="./leaveApply/queryHisTask/"+this.person+"/"+_type;
					}else if(_type='approval'){
						url="./leaveApply/queryFlow/"+this.person
					}
					$.get(url).then(res=>{
						this.tableData = res;
					},error=>{
						alert(error.responseJSON.msg);
					})
					
				},
				pass(val){
					console.log("完成审批");
					console.log(val.taskId);
					console.log(val.name);
					console.log(val.assignee);
					console.log(val.createTime);
					$.get("./leaveApply/flowReceipt/"+val.taskId).then(res=>{
						if("1"==res.code){
							alert("操作成功!");
							this.query();
						}else{
							alert("操作失败!");
						}
					},error=>{
						alert(error.responseJSON.msg);
					})
				},
				transPass(val){
					console.log("传递申请");
					console.log(val.taskId);
					console.log(val.name);
					console.log(val.assignee);
					console.log(val.createTime);
					if(this.nextPerson==null || this.nextPerson==''){
						alert("请选择审批人!");
						return;
					}
					$.get("./leaveApply/transflow/"+val.taskId+"/"+this.nextPerson).then(res=>{
						if("1"==res.code){
							alert("操作成功!");
							this.query();
						}else{
							alert("操作失败!");
						}
					},error=>{
						alert(error.responseJSON.msg);
					})
				}
			}
		})
	</script>
</body>
</html>